import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'yun-loading',
  template: `
    <div  style="z-index: 99999;position: absolute;" *ngIf="show">
      <div class="mask-loading" >
        <div class="load-effect">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .mask-loading {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: rgba(0,0,0,.65);
      overflow-y: auto;
      height: 100%;
      cursor: pointer;
    }

    .load-effect {
      width: 100px;
      height: 100px;
      border-radius: 5px;
      position: relative;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }

    .load-effect span {
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;;
      position: absolute;
      -webkit-animation: load 1.04s ease infinite;
    }

    @-webkit-keyframes load {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0.2;
      }
    }

    .load-effect span:nth-child(1) {
      left: 0;
      top: 50%;
      margin-top: -8px;
      -webkit-animation-delay: 0.13s;
    }

    .load-effect span:nth-child(2) {
      left: 14px;
      top: 14px;
      -webkit-animation-delay: 0.26s;
    }

    .load-effect span:nth-child(3) {
      left: 50%;
      top: 0;
      margin-left: -8px;
      -webkit-animation-delay: 0.39s;
    }

    .load-effect span:nth-child(4) {
      top: 14px;
      right: 14px;
      -webkit-animation-delay: 0.52s;
    }

    .load-effect span:nth-child(5) {
      right: 0;
      top: 50%;
      margin-top: -8px;
      -webkit-animation-delay: 0.65s;
    }

    .load-effect span:nth-child(6) {
      right: 14px;
      bottom: 14px;
      -webkit-animation-delay: 0.78s;
    }

    .load-effect span:nth-child(7) {
      bottom: 0;
      left: 50%;
      margin-left: -8px;
      -webkit-animation-delay: 0.91s;
    }

    .load-effect span:nth-child(8) {
      bottom: 14px;
      left: 14px;
      -webkit-animation-delay: 1.04s;
    }

  `]
})
export class LoadingComponent implements OnInit {

  @Input() show: Boolean = false;

  constructor() {
  }

  ngOnInit() {
  }

}
